<template>
	<view>
		<view class="content u-page">
			<!-- search -->
			<view class="search-content">
				<view class="search" @click="toSearch">
					<view class="icon">
						<u-icon name="search" color="#B0B3BF" size="28"></u-icon>
					</view>
					<view class="word">
						<text>请输入课程名称~</text>
					</view>
				</view>
			</view>
			<!-- 轮播图 -->
			<view class="wrap">
				<unicloud-db v-slot:default="{data, loading, error, options}" collection="swiper" field="main_pic">
					<u-swiper :list="data" name="main_pic" :height="height"></u-swiper>
				</unicloud-db>
			</view>
			<!-- 公告 -->
			<view class="notice-content">
				<view class="notice">
					<view class="title">
						<text>公告</text>
					</view>
					<view class="word">
						<text>这是一条公告 这是一条公告 这是一条公告</text>
					</view>
				</view>
			</view>
			<!-- navbar -->
			<unicloud-db v-slot:default="{data, loading, error, options}" collection="opendb-mall-categories" field="name,icon,is_index_show">
				<view class="menu-content">
					<view class="menu-box">
						<view class="menu-item" v-for="(item,index) in data" :key="index" v-if="item.is_index_show">
							<view class="img-box">
								<image :src="item.icon" mode=""></image>
							</view>
							<view class="name">
								<text>{{item.name}}</text>
							</view>
						</view>
					</view>
				</view>
			</unicloud-db>
			<!-- AD -->
			<view class="ads-content">
				<view class="ads">
					<image src="https://cdn.uviewui.com/uview/swiper/1.jpg" mode=""></image>
				</view>
			</view>
			<!-- card-right-img -->
			<view class="card-right-img-wrap">
				<view class="card-right-img">
					<unicloud-db v-slot:default="{data, loading, error, options}" collection="opendb-mall-goods"
						field="name,sale_price,total_sell_count,main_pic,teacher_id,is_hot">
						<view class="card-item" v-for="(item,index) in data" :key="index"
							@click="toDetail(item._id,item.teacher_id)" v-if="item.is_hot">
							<view class="card-left">
								<view class="top">
									<text>{{item.name}}</text>
								</view>
								<view class="bottom">
									<view class="left">
										<text>￥{{item.sale_price}}</text>
									</view>
									<view class="right">
										<text>{{item.total_sell_count}}人付费</text>
									</view>
								</view>
							</view>
							<view class="card-right">
								<image :src="item.main_pic" mode=""></image>
							</view>
						</view>
					</unicloud-db>
				</view>
			</view>
			<!-- card-left-img -->
			<!-- <card-left-img></card-left-img> -->
			<!-- card-top-img -->
			<!-- <card-top-img></card-top-img> -->


			<!-- 授权登录 -->
			<u-mask :show="modal" @click="modal = false">
				<view class="warp">
					<view class="rect" @tap.stop>
						<view class="tui-modal-custom">
							<view class="tui-modal-title">
								温馨提示
							</view>
							<view class="tui-modal-content">请授权小程序获取您的头像和昵称进行登录</view>
							<view class="bottom-button-box">
								<view class="button-item">
									<u-button height="72rpx" size="medium" type="error" shape="circle" plain
										:throttle-time="1500" @click="modal = false">取消</u-button>
								</view>
								<view class="button-item-1">
									<u-button height="72rpx" size="medium" type="error" shape="circle"
										:throttle-time="1500" open-type="getUserInfo" @getuserinfo="wxGetUserInfo">确认授权
									</u-button>
								</view>
							</view>
						</view>
					</view>
				</view>
			</u-mask>
			<u-mask :show="flag" @click="flag = false">
				<view class="warp">
					<view class="rect" @tap.stop>
						<view class="tui-modal-custom">
							<view class="tui-modal-title">
								温馨提示
							</view>
							<view class="tui-modal-content">请授权小程序获取您的手机号进行登录</view>
							<view class="bottom-button-box">
								<view class="button-item">
									<u-button height="72rpx" size="medium" type="error" shape="circle" plain
										:throttle-time="1500" @click="flag = false">取消</u-button>
								</view>
								<view class="button-item-1">
									<u-button height="72rpx" size="medium" type="error" shape="circle"
										:disabled='disabled' :throttle-time="1500" open-type="getPhoneNumber"
										@getphonenumber="getPhoneNumber">确认授权</u-button>
								</view>
							</view>
						</view>
					</view>
				</view>
			</u-mask>
		</view>
		<!-- tabbar -->
		<u-tabbar v-model="currentTab" :list="tabbar" :icon-size="50"></u-tabbar>
	</view>
</template>

<script>
	import {
		tabbar
	} from '@/common/tabbar.js'
	import cardLeftImg from './components/card-left-img.vue'
	import cardTopImg from './components/card-top-img.vue'

	export default {
		data() {
			return {
				currentTab: 0,
				tabbar: tabbar,
				// 授权登录
				modal: false,
				flag: false,
				disabled: false,
				issign: false, //是否授权
				// 授权登录结束
				//轮播图数据
				height: 330,
			}
		},
		components: {
			cardLeftImg,
			cardTopImg
		},
		onLoad() {
			const phone = uni.getStorageSync('phone') || '';
			if (phone == '') {
				this.modal = true;
			} else {
				this.modal = false;
			}
		},
		methods: {
			toSearch(){
				uni.navigateTo({
					url:'../search/search'
				})
			},
			toDetail(id, tid) {
				console.log(id, tid);
				uni.navigateTo({
					url: '../course-detail/course-detail?courseId=' + id + "&tid=" + tid
				})
			},
			// 登录授权
			//登录
			wxGetUserInfo(e) {
				console.log('e', e)
				if (!e.detail.userInfo) {
					return
				}
				uni.setStorageSync('userinfo', e.detail.userInfo);
				uni.setStorageSync('nickname', e.detail.userInfo.nickName);
				uni.setStorageSync('avatar', e.detail.userInfo.avatarUrl);
				var that = this;
				that.modal = false;
				uni.login({
					provider: 'weixin',
					success(ress) {
						console.log('ress', ress)
						uniCloud.callFunction({
							name: 'login-by-weixin',
							data: {
								code: ress.code
							},
							success(res) {
								console.log('succres', res);
								uni.setStorageSync('token', res.result.token);
								uni.setStorage({
									key: 'openid',
									data: res.result.openid,
									success() {

										that.getUserInfo();
										// that.flag = true;
									}
								});
							},
							fail(res) {
								console.log('failres', res);
								uni.showToast({
									title: '微信登录失败，请稍后再试',
									icon: 'none'
								})
							}
						})

					},
					fail(ress) {
						console.log('fail', ress)
					}
				})
			},
			//获取手机号
			getPhoneNumber(e) {
				if (this.issign) {
					return
				}
				console.log('p', e)
				var that = this;
				that.flag = false;
				uni.getProvider({
					service: 'oauth',
					success(res) {
						// console.log(res.provider[0])
						uni.login({
							provider: res.provider[0],
							success(ress) {
								console.log('rerere', ress);
								const token = uni.getStorageSync('token');
								const openid = uni.getStorageSync('openid');
								uniCloud.callFunction({
									name: 'get-phone',
									data: {
										code: ress.code,
										encryptedData: e.detail.encryptedData,
										iv: e.detail.iv
									},
									success(res) {
										console.log('succres', res);
										const phone = res.result.phoneNumber;
										console.log('phone', phone);
										if (phone) {
											that.disabled = true;
											that.issign = true;
											const user_id = uni.getStorageSync("user_id");
											const db = uniCloud.database()
											db.collection('userinfo')
												.where("_id == '" + user_id + "'")
												.update({
													mobile: phone
												})
												.then(res => {
													console.log('up', res);
													if (res.result.updated == 1) {
														uni.setStorageSync('phone', phone);
													}
												}).catch(err => {
													console.error(err)
												})
										}
									},
									fail(res) {
										console.log('failres', res);
										uni.showToast({
											title: '微信手机号授权失败，请稍后再试',
											icon: 'none'
										})
									}
								})
							}
						})
					}
				})
			},
			//数据插入数据库
			dataInsert(phone) {
				const userinfo = uni.getStorageSync('userinfo');
				const openid = uni.getStorageSync('openid');
				console.log('insert', userinfo, openid, phone);
				var that = this;
				uniCloud.callFunction({
					name: 'insert-userinfo',
					data: {
						username: userinfo.nickName,
						openid: openid,
						mobile: 0,
						nickname: userinfo.nickName,
						avatar: userinfo.avatarUrl,
						gender: userinfo.gender,
						status: 0
					},
					success(res) {
						console.log('succ', res)
						that.getUserInfo();
					},
					fail(res) {
						console.log('fail', res)
					}
				})

			},
			//获取用户信息
			getUserInfo() {
				const openid = uni.getStorageSync('openid');
				var that = this;
				uniCloud.callFunction({
					name: 'get-userinfo',
					data: {
						openid: openid
					},
					success(res) {
						console.log('succ1', res)
					},
					fail(res) {
						console.log('fail1', res)
					},
					complete(res) {
						console.log('comp1', res)
						if (res.result.data.length == 0) {
							that.dataInsert();
							that.flag = true;
						} else {
							uni.setStorageSync('user_id', res.result.data[0]._id);
							if (res.result.data[0].mobile != 0) {
								uni.setStorageSync('phone', res.result.data[0].mobile);
							} else {
								that.flag = true;
							}

						}

					}
				})
			},
			// 登录授权结束
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #F4F5F9;
	}

	.content {
		.search-content{
			padding: 25rpx;
			.search{
				display: flex;
				flex-wrap: wrap;
				align-items: center;
				width: 480rpx;
				height: 55rpx;
				background-color: #F7F8FA;
				border-radius: 35rpx;
				padding: 10rpx 0 10rpx 220rpx;
				.icon{
					
				}
				.word{
					color: #B0B3BF;
					font-size: 28rpx;
				}
			}
		}
		// 轮播图
		.wrap {
			padding: 15rpx;
			background-color: #fff;
		}
		//公告
		.notice-content{
			padding: 15rpx;
			.notice{
				display: flex;
				flex-wrap: wrap;
				.title{
					color: #04BA8F;
					font-size: 30rpx;
					font-weight: bold;
				}
				.word{
					font-size: 26rpx;
					color: #333;
					margin: 5rpx 0 0 10rpx;
				}
			}
		}
		//菜单导航栏
		.menu-content {
			padding: 15rpx;
			background-color: #F4F5F9;

			.menu-box {
				width: 680rpx;
				border-radius: 20rpx;
				background-color: #fff;
				display: flex;
				flex-wrap: wrap;
				padding: 0 0 40rpx 40rpx;

				.menu-item {
					display: flex;
					flex-direction: column;
					flex-wrap: wrap;
					margin: 40rpx 33rpx 0 0;

					.img-box {
						width: 100rpx;
						height: 100rpx;
						border-radius: 50rpx;
						overflow: hidden;
						image {
							width: 100%;
							height: 100%;
						}
					}

					.name {
						margin-top: 10rpx;
						font-size: 26rpx;
						color: #333;
					}
				}
			}
		}
		//广告
		.ads-content{
			background-color: #FAFAFA;
			padding: 20rpx 40rpx;
			.ads{
				width: 670rpx;
				height: 200rpx;
				border-radius: 100rpx;
				overflow: hidden;
				image{
					width: 100%;
					height: 100%;
				}
			}
		}
		//图片在右侧的 card-right-img
		.card-right-img-wrap {
			background-color: #F4F5F9;
			padding: 15rpx;
		}

		.card-right-img {
			background-color: #fff;
			padding: 0 15rpx;

			.card-item {
				display: flex;
				flex-wrap: wrap;
				padding: 20rpx 0;
				border-bottom: 1px solid #FAFAFA;

				.card-left {
					display: flex;
					flex-direction: column;
					flex-wrap: wrap;
					justify-content: space-between;
					padding: 20rpx 0 10rpx 0;
					width: 370rpx;
					margin-right: 20rpx;

					.top {
						font-size: 32rpx;
						color: #434343;
						font-weight: bold;
					}

					.bottom {
						display: flex;
						flex-direction: row;
						justify-content: space-between;

						.left {
							color: #F56C6C;
							font-size: 28rpx;
							font-weight: bold;
						}

						.right {
							color: #B5B5B5;
							font-size: 24rpx;
						}
					}
				}

				.card-right {
					width: 300rpx;
					height: 160rpx;
					border-radius: 10rpx;
					overflow: hidden;

					image {
						width: 100%;
						height: 100%;
					}
				}
			}
		}


	}

	// 登录授权
	.warp {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
	}

	.rect {
		width: 520rpx;
		height: 280rpx;
		padding: 40rpx;
		border-radius: 20rpx;
		background-color: #fff;
	}

	/deep/ .button-item-1 .u-size-medium {
		padding: 0 60rpx !important;
	}

	.tui-modal-title {
		text-align: center;
		font-size: 34rpx;
		color: #333;
		padding-top: 20rpx;
		font-weight: bold;
	}

	.tui-modal-content {
		text-align: center;
		color: #999;
		font-size: 28rpx;
		padding-top: 20rpx;
		padding-bottom: 60rpx;
	}

	.bottom-button-box {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		width: 500rpx;
	}

	.button-item {
		width: 230rpx;
		margin: 0 auto;
	}

	// 登录授权结束
</style>
